<template>
  <div class="wallet">
    <c-title :hide="false" :text="'钱包'"></c-title>
    <img class="walletIconimg" :src="diyUrl('icon_payment for goods@2x.png')" alt="" />
    <div class="txt">我的货款</div>
    <div class="price">
      <div class="small">{{ $i18n.t("money") }}</div>
      <div class="price_txt">{{ money }}</div>
    </div>
    <div class="btn" @click="toUrlLink('new_auction_recharge')">充值</div>
    <div class="btn btn_b" @click="toUrlLink('new_auction_withdraw')">提现</div>
    <div class="txt_l" @click="toUrlLink('new_auction_billing')">账单明细</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hostUrl: "",
      money: "0.00"
    };
  },
  activated() {
    this.hostUrl = process.env.NODE_ENV == "development" ? "dev4.yunzmall.com/plugins/new-auction/assets/image/" : window.location.host + "/plugins/new-auction/assets/image/";
    this.getData();
  },
  methods: {
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.index", {}, "");
      if (result) {
        this.money = data.money;
      } else {
        this.$toast(msg);
      }
    },
    toUrlLink(link) {
      if (link == "new_auction_withdraw") {
        this.$router.push(this.fun.getUrl(link, { tag: "balance" }));
        return;
      }
      this.$router.push(this.fun.getUrl(link, {}));
    }
  },
  computed: {
    diyUrl(url, key = true) {
      return function(url, key = true) {
        if (key) {
          return `https://${this.hostUrl}${url}`;
        } else {
          return `url(https://${this.hostUrl}${url})`;
        }
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.wallet {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: #fff;
  .txt_l {
    font-weight: 400;
    font-size: 1rem;
    color: #126f46;
    text-align: center;
    margin: 0.75rem 0;
  }
  .price {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 11.84rem;
    .small {
      font-weight: bold;
      font-size: 0.94rem;
      color: #000000;
    }
    .price_txt {
      font-weight: bold;
      font-size: 2.5rem;
      line-height: 2.5rem;
      color: #000000;
    }
  }
  .walletIconimg {
    width: 3.75rem;
    height: 3.75rem;
    margin: 0;
    margin-top: 3.44rem;
  }
  .txt {
    font-size: 1.13rem;
    color: #000000;
    margin: 1.56rem 0.63rem;
  }
  .btn {
    width: 12.5rem;
    height: 2.81rem;
    background: #126f46;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    font-weight: bold;
    font-size: 1.06rem;
    color: #ffffff;
    text-align: center;
    line-height: 2.81rem;
  }
  .btn_b {
    background: #f2f2f2;
    font-weight: bold;
    font-size: 1.06rem;
    color: #000000;
    margin-top: 0.94rem;
  }
}
</style>
